<template>
	<view class="container" :class="{'no-cart f-center': !hasLogin}">
		<view v-if="hasLogin">
			<view v-if="isfetch">
				<view v-if="cartList.length > 0">
					<view class="cart-list">
						<view v-for="(item,index) in cartList" :key="index" class="list-item mb20">
							<select-item @getList="getCartList()" ref="selectItem" :item="item" :index="index" @change="getUpdateNum" :isDelete="true"></select-item>
						</view>
					</view>
					<view class="cart-bottom">
						<view class="flex f-align-end">
							<text class="font32 gray333">合计：￥</text>
							<text class="font44 red" style="line-height: 50rpx;">{{totalInfo.money}}</text>
						</view>
						<view class="bottom-btn f-center ml20" @click="settleHandle">
							<text class="font30 white bold">提交订单</text>
						</view>
					</view>
				</view>
				<view class="f-center" style="height: 500rpx;" v-else>
					<text class="font36 gray999 bold mt50">购物车空空如也~</text>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="flex f-column f-align">
				<text class="font32 gray999">登录之后可以查看购物车信息</text>
				<view class="cart-btn f-center" @click="$refs.auth.open()">
					<text class="font36 white bold">去登录</text>
				</view>
			</view>
		</view>

		<!-- 授权登录 -->
		<auth ref="auth" @getList="getCartList()"></auth>
	</view>
</template>

<script>
	import addReduce from '@/components/addreduce.vue'
	import selectItem from '@/components/selectItem.vue'
	import auth from '../components/auth.vue'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				cartList: [],
				isfetch: false,
			}
		},
		components: {
			addReduce,
			selectItem,
			auth
		},
		computed: {
			...mapState(['hasLogin']),
			totalInfo() {
				let money = 0
				let num = 0
				this.cartList.forEach(item => {
					num += item.goodsNumber
					money += parseFloat(item.goodsMoney) * item.goodsNumber
				})

				return { money: money.toFixed(2), num }
			}
		},
		onShow() {
			if (this.hasLogin) {
				this.getCartList()
			}
		},
		onHide() {
			this.$refs.auth.close()
		},
		watch: {
			cartList: {
				handler: function(newVal, oldVal) {
					let cartNum = newVal.reduce((a, b) => {
						return a + b.goodsNumber
					}, 0)
					if (cartNum > 0) {
						uni.setStorageSync('cartNum', cartNum)
						uni.setTabBarBadge({
							index: 2,
							text: JSON.stringify(cartNum)
						})
					} else {
						uni.setStorageSync('cartNum', 0)
						uni.removeTabBarBadge({
							index: 2
						})
					}
				},
				deep: true
			}
		},
		methods: {
			getUpdateNum(event) {
				this.cartList[event.index].goodsNumber = event.num
			},
			settleHandle() {
				uni.setStorage({
					key: 'submitInfo',
					data: JSON.stringify(this.cartList),
					success: () => {
						this.$api.toPage('/pages/submitOrder?isCart=1')
					}
				})
			},
			getCartList() {
				this.$http.ajax({
					url: '/ShoppingTrolley/list',
					params: {
						openId: uni.getStorageSync('openId')
					}
				}).then((res) => {
					this.isfetch = true
					if (res.code == 0) {
						this.cartList = res.data
					} else {
						this.$api.msg(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cart-btn {
		width: 600rpx;
		height: 94rpx;
		background: #5D95FF;
		border-radius: 47rpx;
		margin-top: 200rpx;
	}

	.cart-bottom {
		width: 750rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-top: 2rpx solid #EAEAEA;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 50px;
		/* #endif */

		.bottom-btn {
			width: 240rpx;
			height: 80rpx;
			background: #5D95FF;
			border-radius: 50rpx;
		}

		.delete-btn {
			width: 100rpx;
			height: 60rpx;
			border: 2rpx solid #E7441E;
			border-radius: 30rpx;
		}
	}


	.container {
		padding: 0 0 100rpx;

		.cart-list {

			.list-item {
				width: 750rpx;
				background: rgba(255, 255, 255, 1);
				padding: 26rpx 20rpx;
			}
		}

		::v-deep .uni-popup__wrapper-box {
			padding-bottom: 0;
		}
	}

	.no-cart {
		background-color: #F5F5F5;
	}
</style>
